<template>
  <div class="app-container">
    <div class="register">
      <el-row>
        <el-button type="primary" @click="dialog.addMoreUser = true" class="dakai">批量导入</el-button>
      </el-row>
    </div>
    <tree-table :data="data" :eval-func="func" :eval-args="args" :expand-all="expandAll" border>
      <el-table-column label="编码" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="父权限编码" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.parentAuthorityCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="排序" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.sortOrder }}</span>
        </template>
      </el-table-column>
      <el-table-column label="菜单路径" min-width="200" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.menuHrefUrl }}</span>
        </template>
      </el-table-column>
    </tree-table>

    <!-- 批量添加菜单 -->
    <el-dialog :visible.sync="dialog.addMoreUser" title="批量添加" width="580px">
      <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <span v-if="dialogData.addMoreUser.loading">正在处理，请稍等......</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import treeTable from "@/components/TreeTable";
  import UploadExcelComponent from "@/components/UploadExcel/index.vue";
  import treeToArray from "./navhead/navhead.js";
  import {getRoutes, addMenuList} from "@/api/system/role"; // 数据接口
  import {getTenantId} from '@/utils/auth';

  export default {
    name: "CustomTreeTableDemo",
    components: {treeTable, UploadExcelComponent},
    props: {
      expandAll: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        func: treeToArray,
        data: [],
        args: [null, null, "timeLine"],
        // 弹窗弹出/消失
        dialog: {
          addMoreUser: false,
          view: false
        },
        // 创建
        dialogData: {
          addMoreUser: {
            loading: false
          },
          file: '',
          view: {}
        }
      };
    },
    created() {
      this.getData()
    },
    methods: {
      // 接口获取数据
      getData() {
        getRoutes().then(response => {
          this.data = response.data.items;
          this.total = response.data.items.length;
          this.listFilter = response.data.items;
        })
      },
      beforeUpload(file) {
        const isLt1M = file.size / 1024 / 1024 < 1;
        if (isLt1M) {
          return true
        }
        this.$message({
          message: '请不要上传大小超过1M的文件',
          type: 'warning'
        });
        return false
      },
      handleSuccess({ results, header }) {
        this.dialogData.addMoreUser.loading = true;
        for (const index in results) {
          results[index].tenantId = getTenantId();
        }
        addMenuList(results).then(res => {
          this.$notify({
            title: '成功',
            message: '批量导入完成',
            type: 'success',
            duration: 2000
          });
        });
        this.dialogData.addMoreUser.loading = false;
        this.dialog.addMoreUser = false
      }
    }
  };
</script>
<style lang="scss">
  .register {
    width: 100%;
    height: 44px;
    line-height: 44px;
    padding-left: 10px;
    background-color: #e7e9ed;
    padding-top: 15px;
    padding-right: 34px;
    margin-bottom: 20px;

    .dakai {
      float: right;
      position: absolute;
      right: 10px;
      bottom: -25px;
    }
  }

  .foot {
    margin-top: 20px;
    padding: 15px 15px;
    border-radius: 5px;
    background-color: #d9edf7;
    color: #326f8f;
    border-left: 5px solid #50bfff;

    ul {
      text-decoration: none;
      margin: 0;
      padding: 0;
      list-style: none;

      li {
        margin-top: 5px;
      }
    }
  }
</style>
